<template>
  <div class="noticeWrap1">
    <van-nav-bar
      title="公告详情"
      left-text="返回"
      left-arrow
      fixed
      @click-left="onClickLeft"
    ></van-nav-bar>
    <div v-if="notice">
      <div class="title">{{ notice[0].title }}</div>
      <div class="time">
        发布时间：{{
          notice[0].createTime
        }}
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;阅读次数：{{
          notice[0].readNum + 1
        }}次
      </div>
      <!-- <div class="content" v-html="notice[0].content"></div> -->
      <div class="ql-container">
        <div class="ql-editor" v-html="notice[0].content"></div>
      </div>
    </div>
    <div v-else><van-empty description="公告不存在" /></div>
  </div>
</template>

<script>
import { getNoticeDetail, setNoticeReadNum } from "@/views/api/api.js";
import { Toast } from "vant";
export default {
  components: {},
  data() {
    return {
      noticeID: "",
      notice: "",
    };
  },
  computed: {},
  created() {
    this.init();
  },
  methods: {
    init() {
      this.noticeID = this.$route.query.noticeID;
      let params = {
        noticeID: this.noticeID,
      };
      getNoticeDetail(params).then((res) => {
        if (res.data.code) {
          Toast.fail(res.data.msg);
        } else {
          this.notice = res.data.Info;
          this.notice[0].createTime = this.utc2beijing(
            this.notice[0].createTime
          );
          let param = {
            id: this.notice[0]._id,
            readNum: this.notice[0].readNum + 1,
          };
          setNoticeReadNum(param).then((res) => {
            if (res.data.code) {
              // Toast.fail(res.data.msg)
            } else {
              // 阅读成功
            }
          });
        }
      });
    },
    // 点击返回
    onClickLeft() {
      this.$router.go(-1);
    },
    // 时间戳转为时间
    timestampToTime(timestamp) {
      var date = new Date(timestamp); // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "年";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "月";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + "日 ";
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    },
    // UTC时间格式转通用格式时间
    // eslint-disable-next-line camelcase
    utc2beijing(utc_datetime) {
      // 转为正常的时间格式 年-月-日 时:分:秒
      // eslint-disable-next-line camelcase
      var T_pos = utc_datetime.indexOf("T");
      // eslint-disable-next-line camelcase
      var Z_pos = utc_datetime.indexOf("Z");
      // eslint-disable-next-line camelcase
      var year_month_day = utc_datetime.substr(0, T_pos);
      // eslint-disable-next-line camelcase
      var hour_minute_second = utc_datetime.substr(
        // eslint-disable-next-line camelcase
        T_pos + 1,
        // eslint-disable-next-line camelcase
        Z_pos - T_pos - 1
      );
      // eslint-disable-next-line camelcase
      var new_datetime = year_month_day + " " + hour_minute_second; // 2017-03-31 08:02:06

      // 处理成为时间戳
      // eslint-disable-next-line no-use-before-define
      timestamp = new Date(Date.parse(new_datetime));
      // eslint-disable-next-line no-use-before-define
      timestamp = timestamp.getTime();
      // eslint-disable-next-line no-use-before-define
      timestamp = timestamp / 1000;

      // 增加8个小时，北京时间比utc时间多八个时区
      // eslint-disable-next-line no-use-before-define
      var timestamp = timestamp + 8 * 60 * 60;

      // 时间戳转为时间
      // eslint-disable-next-line camelcase
      var beijing_datetime = this.timestampToTime(timestamp * 1000);
      // eslint-disable-next-line camelcase
      return beijing_datetime; // 2017-03-31 16:02:06
    },
  },
};
</script>
<style>
.noticeWrap1 {
  width: 100%;
  margin-top: 46px;
  padding: 0 16px;
}
.noticeWrap1 img {
  width: 100%;
  text-align: center;
}
.noticeWrap1 p {
  text-align: left;
  white-space: break-spaces;
}
.noticeWrap1 .title {
  font-weight: 700;
  font-size: 0.14rem;
}
.noticeWrap1 .time {
  font-size: 0.1rem;
  color: #9d9d9d;
}
</style>
